<template>
  <div>
    <el-card class="box-card" style="height: 25rem;width: 60%;margin-left: 20%;">
      <div class="demo-image__placeholder">
        <div class="block" style="width:45%;float: left;">
          <el-image style="width: 100%;height: 22.5rem;border-radius: 0.25rem;"  :src="this.courseSubmitFinally.cover"></el-image>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;">
          <div style="font-size: larger;font-weight: bold;text-align: center;">{{this.courseSubmitFinally.title}}<a v-show="this.status==true?true:false" style="font-size: 0.75rem;margin-left: 0.1875rem;color: white;background-color: brown;border-radius: 0.3125rem;">已发布</a></div>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
          课程分类:   {{this.courseSubmitFinally.subjectonetype}}-{{this.courseSubmitFinally.subjecttwotype}}
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
         <img :src="this.courseSubmitFinally.teacherAvatar" style="width: 3.4375rem;height: 3.4375rem;"/>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
          课程讲师:   {{this.courseSubmitFinally.teacherName}}
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
          课时数量:<span style="font-weight: bold;color: #409EFF;"> {{this.courseSubmitFinally.lessonNum}}</span>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
          <span>课程价格:</span><span style="font-weight: bold;color: red;">￥{{this.courseSubmitFinally.price}}</span>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
          <span>是否免费:</span><span style="font-weight: bolder;color: chartreuse;" v-show="this.free==false?true:false">{{this.courseSubmitFinally.isfree}}</span>
          <span style="font-weight: bolder;color: brown;" v-show="this.free==true?true:false">{{this.courseSubmitFinally.isfree}}</span>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;background-color: whitesmoke;margin-top: 0.125rem;font-size: small;border-radius: 0.25rem;margin-top:0.5375rem;">
            <textarea :disabled="true" class="mytextarea">{{this.courseSubmitFinally.description}}</textarea>
        </div>
        <div></div>
      </div>

    </el-card>
  </div>
</template>

<script>
  export default{
    name: '',
    props:{
      courseSubmitFinally: {},
      free: '',
      status: ''
    }
  }
</script>

<style>
  .mytextarea{

    font-size: smaller;
    width:100%;/*自动适应父布局宽度*/
    height: 9.375rem;
    overflow:auto;
    word-break:break-all;
    border: hidden;
    scrollbar-face-color: #889B9F;
    scrollbar-width: 0.0625rem;
    scrollbar-shadow-color: #3D5054;

    scrollbar-highlight-color: #C3D6DA;

    scrollbar-3dlight-color: #3D5054;

    scrollbar-darkshadow-color: #85989C;

    scrollbar-track-color: #95A6AA;

    scrollbar-arrow-color: #FFD6DA;
  }
</style>
